<template>
	<a-button :loading="loading">
		<!-- <template #icon>
			<svg-icon :icon-class="icontype" class="icon" v-if="icontype != ''"></svg-icon>
		</template> -->
		{{ title }}
		<!-- <slot></slot> -->
	</a-button>
</template>

<script setup lang="ts">
	import {
		defineProps
	} from "vue";

	defineProps({
		title: {
			type: String,
			default () {
				return "";
			},
		},
		icontype: {
			type: String,
			default () {
				return "";
			},
		},
		loading:{
			type:Boolean,
			default () {
				return false;
			},
		}
	});
</script>

<style lang="less" scoped>
	.ant-btn {
		min-width: 104px;
		box-sizing: border-box;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 5px;
		margin-right: 20px;
		font-size: 16px;
		font-family: 'SourceHanSansCN-Medium';
		border:none;
		background-color: rgba(255, 255, 255, 0);
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
		overflow:hidden;
		.icon {
		  width: 26px;
		  height: 26px;
		  vertical-align: middle;
		  margin-right: 5px;
		}
	}
	.primary{
		background-color: @success00;
		color:@white;
		&:hover{
			color:@success00;
			background-color:rgba(255, 255, 255, 0);
			border: 1px solid @success00;
		}
	}
	.reaset{
		background-color: rgba(255, 255, 255, 0);
		color:@success00;
		border:1px solid @success00;
	}
	.submit{
		background: @success00;
		color:@white
	}
	.delete{
		// background-color: @white;
		// background: @danger600;
		border:1px solid @danger600;
		color:@danger600;
		&:hover{
			color:@white;
			background-color:@danger600;
		}
	}
</style>
